<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆卡片游戏 - 主页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>记忆卡片游戏</h1>
        <div class="game-settings">
            <div class="setting-group">
                <label for="theme-select">选择主题</label>
                <select id="theme-select" class="select-box">
                    <option value="classic">经典蓝</option>
                    <option value="dark">暗夜黑</option>
                    <option value="forest">森林绿</option>
                </select>
            </div>
            <div class="setting-group">
                <label for="difficulty-select">选择难度</label>
                <select id="difficulty-select" class="select-box">
                    <option value="beginner">入门模式 (3×4 网格，12张卡片)</option>
                    <option value="easy">简单模式 (4×6 网格，24张卡片)</option>
                    <option value="hard">困难模式 (6×8 网格，48张卡片)</option>
                    <option value="hell">炼狱模式 (8×9 网格，72张卡片)</option>
                    <option value="challenge">挑战模式 (动态难度)</option>
                </select>
            </div>
            <button id="start-game" class="start-btn">开始游戏</button>
            <button id="show-rules" class="rules-btn">游戏规则</button>
        </div>
    </div>

    <!-- 游戏规则弹框 -->
    <div id="rules-modal" class="modal">
        <div class="modal-content rules-modal-content">
            <h2>游戏规则</h2>
            <div class="rules-content">
                <div class="rule-group">
                    <h3>基本规则</h3>
                    <ul>
                        <li>点击卡片将其翻转</li>
                        <li>每次可以翻转两张卡片</li>
                        <li>找出所有相同的卡片对</li>
                        <li>如果匹配成功，卡片保持翻开</li>
                        <li>如果不匹配，卡片会自动翻回</li>
                        <li>在规定时间内完成配对获得胜利</li>
                    </ul>
                </div>
                <div class="rule-group">
                    <h3>难度说明</h3>
                    <ul>
                        <li>入门模式：3×4 网格，12张卡片，适合初学者</li>
                        <li>简单模式：4×6 网格，24张卡片，稍有挑战</li>
                        <li>困难模式：6×8 网格，48张卡片，考验记忆</li>
                        <li>炼狱模式：8×9 网格，72张卡片，极限挑战</li>
                        <li>挑战模式：从2×2开始，通关后逐步增加难度</li>
                    </ul>
                </div>
                <div class="rule-group">
                    <h3>特殊道具</h3>
                    <ul>
                        <li>💡 提示卡：随机显示一张卡片2秒</li>
                        <li>⌛ 时间卡：增加30秒游戏时间</li>
                    </ul>
                </div>
            </div>
            <button id="close-rules" class="control-btn">关闭</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html> 